import { Text, View, StyleSheet, Pressable } from "react-native"
import { AnimatePresence, MotiView } from "moti"
import { useState, Fragment } from "react"
import { Entypo, AntDesign } from "@expo/vector-icons"
import { colors, typography } from "app/theme"

export default function ActionMenu({ onCreateAppointment }) {
  const [expanded, setExpanded] = useState(false)

  return (
    <Fragment>
      <Pressable onPress={() => setExpanded(!expanded)} style={[styles.button]}>
        <MotiView
          style={{ position: "absolute" }}
          animate={{ rotate: expanded ? "360deg" : "0deg" }}
          transition={{
            duration: 150,
            type: "timing",
          }}
        >
          <AntDesign name="pluscircleo" size={20} color="white" />
        </MotiView>
      </Pressable>
      <AnimatePresence>
        {expanded && (
          <View style={{ position: "absolute", bottom: 0, right: 0 }}>
            {actions.map((action, i) => (
              <ActionButton
                key={i.toString()}
                action={action}
                index={i}
                onCreateAppointment={onCreateAppointment}
              />
            ))}
          </View>
        )}
      </AnimatePresence>
    </Fragment>
  )
}

function ActionButton({ action, index, onCreateAppointment }) {
  return (
    <MotiView
      transition={{ delay: index * 100, damping: 15, mass: 1 }}
      from={{
        opacity: 0,
        translateY: 0,
      }}
      animate={{
        opacity: 1,
        translateY: -65 * (index + 1),
      }}
      exit={{
        opacity: 0,
        translateY: 0,
      }}
    >
      <Pressable onPress={() => onCreateAppointment()} style={[styles.button2]}>
        <View style={styles.buttton3}>
          <Entypo name="plus" size={20} color={"white"} />
          <Text style={styles.text}>{action.text}</Text>
        </View>
      </Pressable>
    </MotiView>
  )
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    bottom: 160,
    zIndex: 1000,
    backgroundColor: "red",
  },
  button: {
    borderRadius: 100,
    width: 55,
    height: 55,
    justifyContent: "center",
    alignItems: "center",
    position: "absolute",
    bottom: 160,
    right: 20,
    zIndex: 1,
    backgroundColor: colors.green,
  },
  button2: {
    borderRadius: 10,
    width: 220,
    height: 44,
    position: "absolute",
    bottom: 160,
    right: 20,
    zIndex: 1,
    backgroundColor: colors.green,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 14,
    marginLeft: 10,
    fontFamily: typography.fonts.spaceGrotesk.medium,
    color:colors.black
  },
  buttton3: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
})

const actions = [
  {
    type: "Send",
    color: "#341A34",
    emoji: "👨🏻‍🚒",
    border: "#692D6F",
    text: "Create Appointment",
  },
]
